{% extends 'partial/layouts.html' %}
{% block seoTitle %}采集源列表{% endblock %}
{% block content %}
<main >

    <div class="install container">
        <h1>数据源</h1>
        <div class="tableList">

            <!-- 搜索 start-->
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="searchForm">
                <div class="layui-inline">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block" >
                        <input type="text" name="keyword" class="layui-input" autocomplete="off"placeholder="链接/标题"  >
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="searchSub">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>

            </div>
            <!-- 搜索 end -->

        <table id="list" lay-filter="list" ></table>
        </div>
    </div>
    <div class="container layui-card tipsCard">
        <div class="layui-card-header">Tips（2021-01-05）：</div>
        <div class="layui-card-body">
            <h3>万能抓取列表/首页:</h3>
            <h4>链接地址示例：<a href="http://www.lycecho.com/" target="_blank">http://www.lycecho.com/</a> 或者 <a href="http://www.lycecho.com/archives/category/golang" target="_blank">http://www.lycecho.com/archives/category/golang</a></h4><hr>
            <h3>万能抓取详情页:</h3>
            <h4>链接地址示例：<a href="http://www.lycecho.com/archives/4565" target="_blank">http://www.lycecho.com/archives/4565</a> </h4><hr>
            <h3>wordpress网站Rss订阅：</h3>
            <h4>链接地址示例：<a href="http://www.lycecho.com/" target="_blank">http://www.lycecho.com/feed</a></h4>
        </div>
    </div>

</main>

<script type="text/html" id="add-form">
    <div class="layui-form padding-normal" lay-filter="source-form">
        <div class="layui-form-item">
            <label class="layui-form-label">数据源类型</label>
            <div class="layui-input-block">
                <select name="urlType" lay-verify="required">
                    <option value="1" selected>万能抓取列表/首页</option>
                    <option value="2">万能抓取详情页</option>
                    <option value="3">wordpress网站Rss订阅</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据源地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" required  lay-verify="required" placeholder="http开头的网址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">只保存文字</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" name="onlyText" value="1" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">过滤非本站链接</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" name="urlOnlySelf" value="1" lay-text="过滤|不过滤">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">监听更新</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" name="isMonitor" value="1" lay-text="监听|不监听">
            </div>
        </div>


        <div class="layui-form-item">

            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">内容规则</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label">包含任意关键词</label>
                            <div class="layui-input-block">
                                <input type="text" data-type="contentContain" value="" autocomplete="off" placeholder="回车添加" class="layui-input tag-input" data-inputtype="one">
                                <div class="tag-items">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" name="id">
    </div>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="delete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加新数据源</button>
    </div>
</script>
<script type="text/html" id="control">
    <a class="layui-btn layui-btn-xs" lay-event="catch">抓取</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    var content = {};
    layui.use(['table', 'layer', 'form','element'], function(){
        let table = layui.table;
        let layer = layui.layer;
        let form  = layui.form;
        let $ = layui.$;
        var element = layui.element;


        table.render({
            elem: '#list'
            ,limit: 20
            ,url: '/api/article/source/list'
            ,page: true
            ,toolbar: '#toolbar'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID',width: 50}
                ,{field: 'url', title: '列表连接', edit: 'text', cellMinWidth:300}
                ,{field: 'urlType', title: '链接类型',templet:function(d){
                        switch (d.urlType){
                            case 1:
                                return '万能抓取列表/首页'
                            case 2:
                                return '万能抓取详情内容页'
                            case 3:
                                return 'wordpress网站Rss订阅'
                        }
                    }}
                ,{field: 'errorTimes', title: '尝试错误次数', edit: 'text',width:80}
                ,{field: 'urlOnlySelf', title: '过滤非本站网址', edit: 'text',width:80}
                ,{field: 'onlyText', title: '只保存文本', edit: 'text',width:80}
                ,{field: 'isMonitor', title: '监听状态', edit: 'text',width:80}
                ,{fixed: 'right', width:180, align:'center', toolbar: '#control'}
            ]]
        });

        //监听搜索
        form.on('submit(searchSub)', function(data){
            var field = data.field;
            //执行重载
            table.reload('list', {
                where: field
                ,page:{
                    curr:1
                }
            })
        })


        table.on('toolbar(list)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delete':
                    var data = checkStatus.data;
                    layer.confirm('真的删除这些数据源吗？', function(index){
                        layer.close(index);
                        for(let i in data) {
                            let item = data[i];
                            $.post("/api/article/source/delete", {id: item.id}, function(res) {
                                layer.msg(res.msg);
                            }, 'json');
                        }
                        setTimeout(function(){
                            table.reload('list');
                        }, 2000);
                    });
                    break;
                case 'add':
                    layer.open({
                        type: 1,
                        title: "添加新的数据源",
                        area: ["450px"],
                        content: $("#add-form").html(),
                        btn: ["确定", "取消"],
                        yes: function(index){
                            let data = form.val("source-form");
                            data = formatFormatData(data)
                            $.postJson({
                                url:"/api/article/source/save"
                                ,data: data
                                ,success: function(res) {
                                if(res.code === 0) {
                                    layer.close(index);
                                    table.reload('list');
                                }
                                layer.msg(res.msg);
                            }
                            });
                        }
                        ,success:function(){
                            element.init();
                            form.render()
                        }
                    })
                    break;
            };
        });
        table.on('tool(list)', function(obj){
            let data = obj.data;
            let layEvent = obj.event;
            if(layEvent === 'del'){
                layer.confirm('真的删除该条数据源吗？', function(index){
                    $.post("/api/article/source/delete", {id: data.id}, function(res) {
                        if(res.code === 0) {
                            obj.del();
                            layer.close(index);
                        }
                        layer.msg(res.msg);
                    }, 'json');
                });
            } else if(layEvent === 'edit'){
                $.renderDiy($('#add-form').html(),data,{
                    title: "编辑数据源",
                    area: ["450px"],
                    btn: ["确定", "取消"],
                    yes: function(index){
                        let data = form.val("source-form");
                        data = formatFormatData(data)
                        $.postJson({
                            url:"/api/article/source/save"
                            ,data: data
                            ,success: function(res) {
                                if(res.code === 0) {
                                    layer.close(index);
                                    table.reload('list');
                                }
                                layer.msg(res.msg);
                            }
                        });
                    }
                    ,success:function(){
                        console.log(data)
                        $(".tag-input").each(function(i, item){
                            let type = $(item).data('type');
                            for(let i in data['ruleSettingArr'][type]){
                                $(item).next('.tag-items').append($('#tag-template').html().replace(/itemType/g, type).replace(/itemIndex/g, i).replace(/itemTitle/g, data['ruleSettingArr'][type][i]));
                            }
                        })
                        form.val("source-form",data);
                        element.init();
                        form.render()
                    }
                })
            } else if(layEvent === 'catch'){
                $.post("/api/article/source/catch", {id: data.id}, function(res) {
                    layer.msg(res.msg);
                }, 'json');
            }
        });
        table.on('edit(list)', function(obj){
            let data = formatFormatData(obj.data);
            $.postJson({
                url:"/api/article/source/save"
                ,data: data
                ,success: function(res) {
                    if(res.code === 0) {
                        obj.update(res.data)
                    }
                    layer.msg(res.msg);
                }
            });
        });

        function formatFormatData(data){

            data.id                 = Number(data.id)
            data.error_times        = Number(data.error_times);
            data.urlType            = Number(data.urlType);
            data.isMonitor          = Number(data.isMonitor);
            data.rule = {};
            data.rule.urlOnlySelf   = Number(data.urlOnlySelf);
            data.rule.onlyText      = Number(data.onlyText);

            //内容包含
            var reg = RegExp(/contentContain\[/);
            var contentContain = [];
            $.each(data,function(k,v){
                if(reg.test(k)){
                    contentContain.push(v)
                    delete  data[k]
                }
            })
            data.rule.contentContain = contentContain
            delete data.urlOnlySelf
            delete data.onlyText
            return data
        }

    });
</script>

{% include "partial/tag.html" %}

{% endblock %}